<template>
  <div>
    <el-card class="box-card">
      <div slot="header" style="text-align:left"><h3>应用名称：<span v-if="appInfo.length>0">{{this.appInfo[0].name}}</span></h3></div>
      <!--应用信息-->
      <div style="text-align:left">
         <h3><i class="el-icon-s-promotion"></i>应用信息</h3>
      </div>
      <el-table :data="appInfo" border style="width: 100%">
        <el-table-column prop="name" label="订单号"></el-table-column>
        <el-table-column prop="createtime" label="时间" ></el-table-column>
        <el-table-column prop="url" label="地址" ></el-table-column>
         <el-table-column prop="code" label="应用代码" ></el-table-column>
        <el-table-column prop="used" label="启用" >
            <template slot-scope="scope">
            <span style="color:green" v-if="scope.row.used">启用</span>
            <span style="color:red" v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="应用类型"></el-table-column>
      </el-table>

      <!--企业信息-->
      <div style="text-align:left">
         <h3><i class="el-icon-s-promotion"></i>企业信息</h3>
      </div>
       <el-table :data="companies" border style="width: 100%">
      
        <el-table-column prop="name" label="企业名称"> </el-table-column>
        <el-table-column prop="legalPerson" label="法人"></el-table-column>
        <el-table-column prop="area" label="地区"></el-table-column>
          <el-table-column prop="expiretime" label="有效期">
            <template slot-scope="scope">
            {{scope.row.expiretime}}<span style="color:red" v-if="new Date(scope.row.expiretime)<=new Date()"> 【过期】</span>
          </template>
        </el-table-column>
      </el-table>
    
    </el-card>
  </div>
</template>

<script>
import { appDetail } from "@/libs/api.js";
export default {
  methods: {
      tableRowClassName({row, rowIndex}) {
        if (row.refundNo) {
          return 'warning-row';
        } 
        return '';
      }

  },

  mounted() {
    if (this.$route.query.id) {
      appDetail(this.$route.query.id).then(res => {
        this.appInfo .push(res.app);
        this.companies=res.companies;
      });
    }
  },

  data() {
    return {
      appInfo:[],
      companies: []
    };
  }
};
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>